<script setup lang="ts">
import {Film} from "@element-plus/icons-vue"
import type {CountCardProps} from "@/interface/CountCard.ts";

const {count, title} = defineProps<CountCardProps>()
</script>

<template>
  <el-card class="movieTotal">
    <el-row>
      <el-col :span="8" class="icon">
          <el-icon size="40" color="#f8b042">
            <slot>
              <Film/>
            </slot>
          </el-icon>
      </el-col>
      <el-col :span="16">
        <div class="info">
          <el-text class="text number-weight" size="large">{{ count }}</el-text>
          <el-text class="text" type="info">{{ title }}</el-text>
        </div>
      </el-col>
    </el-row>

  </el-card>
</template>

<style scoped>
.movieTotal {
  width: 220px;
}

.icon {
  width: 60px;
  height: 60px;
  padding: 10px;
  background-color: #fcedd7;
  border-radius: 10px;
}

.info {
  padding-left: 10px;
  height: 100%;
  display: grid;
}

.text {
  padding: 0;
  height: 30px;
  line-height: 30px;
}

.number-weight {
  font-weight: bold;
}
</style>